<!DOCTYPE html>
<html>
    <head>
        <title>Hikic Demo</title>
        <meta charset="UTF-8">
        <style>
            a{
                color: gray;
            }
        </style>
    </head>
    <body style="padding: 30px;box-sizing: border-box; text-align: center;background: whitesmoke;">
        <div id="nav" style="position: fixed;bottom: 0px;right:0px;height: 100px;width: 200px;background: white;border: black 2px solid;border-radius: 10px;box-sizing: border-box;padding: 5px;">
            <div id="nav-close" style="cursor: pointer;border-radius: 50%;height: 40px;width: 40px;background-color: crimson;font-size: 22px;text-align: center;box-sizing: border-box;padding-top: 5px;position: relative;z-index: 1;">X</div>
            <div id="nav-content" style="overflow: auto;background: whitesmoke;height: 60px;width: 180px;position: relative;bottom: 20px;left: 5px;border-radius: 10px;box-sizing: border-box;padding: 5px;padding-top: 20px;">
                <a href="#top">TOP-顶部</a>
            </div>
        </div>
        <h1 id="top" style="color: red;">欢迎使用Hikic！</h1>
        <hr>
        <h2>Hikic是被用来<span style="color:blue;">简化复杂网页脚本</span>的<span style="color:blueviolet;">轻量级</span><span style="color:brown;">无依赖</span>JavaScript库</h2>
        <hr>
        <h2>Hikic可以实现许多JQuery库可以实现的功能，同时<span style="color:chocolate;">抛弃</span>了许多JQuery库不常使用的方法，Hikic库比JQuery库<span style="color:coral;">更加轻量级</span>，同时也<span style="color:darkgray;">更加实用</span>，比如说cookie这方面</h2>
        <hr>
        <h2 style="color: red;">下面，就让我们来一起体验Hikic的魅力吧！</h2>
        <hr>
        <h2 id="ysxzq"><u>Hikic元素选择器</u></h2>
        <h3>在JQuery中，选择器为$（美元符号），但是在Hikic中，选择器换成了_（下划线）</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").方法</code>
        <hr>
        <h2>val方法</h2>
        <h3>val方法可以获取或设置元素里面的value值</h3>
        <h3>获取value值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").val();</code>
        <h3>设置value值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").val("Hello World");</code>
        <hr>
        <h2>html方法</h2>
        <h3>html方法可以获取或设置元素里面的DOM</h3>
        <h3>获取元素里的DOM</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").html();</code>
        <h3>设置元素里的DOM</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").html("<\br>");</code>
        <hr>
        <h2>text方法</h2>
        <h3>text方法可以获取或设置元素里面的文本</h3>
        <h3>获取元素里的文本</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").text();</code>
        <h3>设置元素里的文本</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").text("Hello World");</code>
        <hr>
        <h2>attr方法</h2>
        <h3>attr方法可以获取或设置元素的属性</h3>
        <h3>获取元素的属性</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").attr("value");</code>
        <h3>设置元素的属性</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").attr("value","helloWorld");</code>
        <hr>
        <h2>addClass方法</h2>
        <h3>addClass方法可以给元素添加class属性值，如果想一次添加多个，请用;（分号）分隔</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").addClass("testClass;testClass2");</code>
        <hr>
        <h2>hasClass方法</h2>
        <h3>hasClass方法可以检查元素是否含有这个class</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").hasClass("testClass");</code>
        <hr> 
        <h2>removeAttr方法</h2>
        <h3>removeAttr方法可以删除元素的指定属性</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").removeAttr("value");</code>
        <hr> 
        <h2>removeClass方法</h2>
        <h3>removeClass方法可以删除元素的指定class</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").removeClass("testClass");</code>
        <hr>
        <h2>removeHTML方法</h2>
        <h3>removeHTML方法可以删除自身DOM元素</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").removeHTML();</code>
        <hr>
        <h2>empty方法</h2>
        <h3>empty方法可以删除DOM元素的全部子节点</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").empty();</code>
        <hr>
        <h2>css方法</h2>
        <h3>css方法可以获取或设置所选元素的css属性值</h3>
        <h3>获取元素的样式值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").css("display");</code>
        <h3>设置元素的样式值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").css("display","block");</code>
        <hr>
        <h2>height方法</h2>
        <h3>height方法可以获取或设置所选元素的height属性</h3>
        <h3>获取元素的height值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").height();</code>
        <h3>设置元素的height值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").height("100px");</code>
        <hr>
        <h2>width方法</h2>
        <h3>width方法可以获取或设置所选元素的width属性</h3>
        <h3>获取元素的width值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").width();</code>
        <h3>设置元素的width值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").width("100px");</code>
        <hr>
        <h2>innerWidth方法</h2>
        <h3>innerWidth方法可以获取元素内部宽度</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").innerWidth();</code>
        <hr>
        <h2>innerHeight方法</h2>
        <h3>innerHeight方法可以获取元素内部高度</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").innerHeight();</code>
        <hr>
        <h2>parent方法</h2>
        <h3>parent方法可以获取dom的父元素</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").parent();</code>
        <hr>
        <h2>children方法</h2>
        <h3>children方法可以获取dom的全部子元素</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").children();</code>
        <hr>
        <h2>load方法</h2>
        <h3>load方法可以使用ajax读取文件，并加载到dom里</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test2").load("Hikic.js","POST",true);</code>
        <hr>
        <h2>cookie方法</h2>
        <h3>cookie方法设置和替换cookie，（path不填写则默认为/）,如果cookie名称一样则替换，第三个参数是时间（time）</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_().cookie("cookieName","cookieValue","Thu, 18 Dec 3000 12:00:00 GMT","Path");</code>
        <hr>
        <h2>getCookieVal方法</h2>
        <h3>getCookieVal方法可以获取cookie的值</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_().getCookieVal("cookieName");</code>
        <hr>
        <h2>delCookie方法</h2>
        <h3>delCookie方法可以删除cookie</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_().delCookie("cookieName");</code>
        <hr>
        <h2>click方法</h2>
        <h3>click方法用来设置点击事件</h3>
        <h3>固定格式：</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").click(function(){alert("test")})</code>
        <hr>
        <h3>另外还有mousemove、mousedown、mouseup、mouseout、mouseover、ready（相当于onload）、focus、blur这些方法，格式与click方法一样，只是方法名称换了，实现的也是不同的效果</h3>
        <hr>
        <h2>hide方法</h2>
        <h3>hide方法用来快速隐藏元素</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").hide();</code>
        <hr>
        <h2>show方法</h2>
        <h3>show方法用来快速显示元素</h3>
        <h3>show方法有一个参数，叫displayName（只可以为block和inline），这个参数可以为空，当这个参数被设置且值不为其它值的时候，将会改变css的display的类型，不设置或为其他值时，默认为block</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").show();</code>
        <hr>
        <h2 style="color: red;">lazyLoad方法[推荐]</h2>
        <h3>lazyLoad懒加载方法用来保证网页性能，被懒加载选中的图片（资源）将会在资源出现在用户屏幕视野里或者在屏幕视野之上才会被加载，这样既保证了性能，又不会影响用户体验</h3>
        <h3>lazyLoad方法只有一个参数：url，url设置所选元素的src属性</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_("#test").lazyLoad("bg.jpg");</code>
        <hr>
        <h2 style="color: red;">setLazyLoadLRT方法[推荐]</h2>
        <h3>setLazyLoadLRT方法用来设置准备懒加载的队列的监听器的重复时间间隔</h3>
        <h3>setLazyLoadLRT方法也只有一个参数：interval（间隔）</h3>
        <h3>不设置懒加载监听器时间间隔则默认为50毫秒</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_().setLazyLoadLRT(50);</code>
        <hr>
        <h2 style="color: red;">setLazyLoadRange方法[推荐]</h2>
        <h3>setLazyLoadRange方法用来设置懒加载的资源距离进入屏幕范围还剩多少px时就加载，默认为20</h3>
        <h3>setLazyLoadRange方法只有一个参数：PX（像素）</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">_().setLazyLoadRange(20);</code>
        <hr>
        <h2>构造方法Hikic</h2>
        <h3>Hikic构造方法可以用来获取Hikic的具体信息，具体方法如下</h3>
        <h3>createTime方法可以获取Hikic文件的创建时间</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">Hikic().createTime();</code>
        <hr>
        <h3>version方法可以获取Hikic文件的版本</h3>
        <code style="background: white;font-size: 18px;border:black 2px solid; border-radius: 5px;box-sizing: border-box;padding: 7px;" title="代码演示">Hikic().version();</code>
        <hr>
        <div id="test" style="color: red;background: black;height: 100px;width: 100px;text-align: center;box-sizing: border-box;padding-top: 20px;margin: auto;">这是测试div，id为：test</div>
            <textarea placeholder="请输入Hikic或JS代码" id="text" style="resize: none;box-sizing: border-box;margin-top: 10px;height: 80px;width: 300px;font-size: 17px;"></textarea>
            <br>
            <input id="do" style="margin: auto;" type="button" value="执行">
            <br>
            <br>
            <br>
        <script type="text/javascript" src="Hikic.js"></script>
        <script>
            _("#do").click(function(){
                eval(_("#text").val());
            })
            _("#nav-close").click(function(){
                _("#nav").css("display","none");
            })
        </script>
    </body>
</html>